<template>
  <div class="apple-item">
    <div class="one">
      <div>
        <img :src="item.picUrl" alt="" />
        <div class="ic">
          <i class="fa fa-headphones"></i>
          <span>{{ item.playCount | filterOne }}万</span>
        </div>
      </div>
      <div class="text">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    filterOne(val) {
      return (val / 10000).toFixed(1);
    },
  },
};
</script>

<style lang="less" scoped>
.apple-item {
  margin-bottom: 10px;
  .one {
    position: relative;
    .ic {
      color: white;
      position: absolute;
      top: 2px;
      right: 6px;
      font-size: 12px;
      i {
        margin-right: 2px;
        vertical-align: middle;
      }
    }
    img {
      width: 100%;
    }
    .text {
      padding-left: 5px;
      font-size: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style>